<template>
  <div class="container">
    <!-- 顶部操作区域 -->
    <el-card class="action-card" shadow="never">
      <div class="action-wrapper">
        <el-button icon="ArrowLeft" @click="goBack">返回</el-button>
        <el-button type="primary" icon="Printer" @click="printHistoricalQuotation">打印</el-button>
      </div>
    </el-card>

    <!-- 内容展示区域 -->
    <el-card class="content-card" shadow="never">
      <div class="loading-container" v-if="loading">
        <el-skeleton :rows="10" animated />
      </div>
      <div v-else>
        <div class="detail-header">
          <h2>历史单据详情</h2>
          <div class="detail-info">
            <p><strong>编号：</strong>{{ historicalQuotation.code }}</p>
            <p><strong>项目名称：</strong>{{ historicalQuotation.projectName }}</p>
            <p><strong>创建时间：</strong>{{ formatDate(historicalQuotation.createTime) }}</p>
          </div>
        </div>
        
        <!-- 使用v-html渲染保存的预算单内容 -->
        <div class="budget-content" id="historicalBudgetContent" v-html="historicalQuotation.content"></div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getHistoricalQuotationDetailApi } from '@/api/historicalQuotation/index'
import type { HistoricalQuotation } from '@/api/historicalQuotation/type'
import { ArrowLeft, Printer } from '@element-plus/icons-vue'

// 路由实例
const router = useRouter()
const route = useRoute()

// 加载状态
const loading = ref(true)

// 历史报价单数据
const historicalQuotation = ref<HistoricalQuotation>({})

// 获取ID参数
const getId = (): number => {
  const id = route.params.id
  return id ? parseInt(id as string) : 0
}

// 返回列表页
const goBack = () => {
  router.push({ path: '/compute/historicalQuotation/index' })
}

// 获取历史报价单详情
const getDetail = async () => {
  const id = getId()
  if (!id) {
    ElMessage.error('参数错误')
    return
  }

  loading.value = true
  try {
    const res = await getHistoricalQuotationDetailApi(id)
    historicalQuotation.value = res.data
  } catch (error) {
    console.error('获取历史报价单详情失败', error)
    ElMessage.error('获取历史报价单详情失败')
  } finally {
    loading.value = false
  }
}

// 打印历史报价单
const printHistoricalQuotation = () => {
  const printWindow = window.open('', 'PRINT', 'height=800,width=1200')
  if (printWindow) {
    const printContents = document.getElementById('historicalBudgetContent')?.innerHTML || ''
    
    // 直接使用打印内容
    printWindow.document.write(`
      <html>
        <head>
          <title></title>
          <base href="${window.location.origin}${window.location.pathname}">
          <style>
            body { font-family: SimSun, serif; margin: 0; padding: 0; text-align: center; }
            table { width: 99%; border-collapse: collapse; margin: 0 auto; }
            table, th, td { border: 1px solid black; }
            th, td { padding: 5px; text-align: center; vertical-align: middle; }
            .header { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; text-align: center; }
            .title { font-size: 18px; font-weight: bold; text-align: center; }
            .date { text-align: center; }
            .yellow-bg { background-color: #FFFF00; }
            .yellow-bg td { text-align: center; vertical-align: middle; }
            .pink-bg { background-color: #FFCCCC; }
            .blue-bg { background-color: #CCFFFF; }
            .total-row { font-weight: bold; }
            .print-button { display: none !important; }
            .budget-header { 
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 24px;
              padding-bottom: 16px;
              border-bottom: 1px solid #ebeef5;
              position: relative;
              text-align: center;
            }
            .budget-logo {
              position: absolute;
              top: 10px;
              text-align: center;
            }
            .budget-logo img.logo-image {
              max-width: 150px;
              height: auto;
              margin: 0 auto;
            }
            .budget-info {
              text-align: center;
              margin: 0 auto;
              width: 100%;
            }
            .budget-info h2 {
              margin: 0;
              font-size: 24px;
              color: #303133;
              text-align: center;
            }
            .budget-date {
              text-align: center;
              font-size: 14px;
              color: #606266;
            }
            .budget-table {
              width: 99%;
              border-collapse: collapse;
              margin: 16px auto;
            }
            .budget-table td {
              text-align: center;
              vertical-align: middle;
              padding: 8px;
              border: 1px solid #000;
            }
            .budget-footer {
              margin-top: 24px;
              padding-top: 16px;
              border-top: 1px solid #ebeef5;
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: center;
            }
            .total-row td {
              font-weight: bold;
              background-color: #f2f2f2;
              text-align: center;
              vertical-align: middle;
            }
          </style>
        </head>
        <body>
          ${printContents}
        </body>
      </html>
    `)
    printWindow.document.close()
    printWindow.focus()
    printWindow.print()
    printWindow.close()
  } else {
    ElMessage.error('无法打开打印窗口，请检查浏览器设置')
  }
}

// 格式化日期
const formatDate = (date: string | undefined) => {
  if (!date) return '--'
  return new Date(date).toLocaleString()
}

onMounted(() => {
  getDetail()
})
</script>

<style scoped lang="scss">
.container {
  padding: 20px 20px 0px;

  /*顶部操作卡片*/
  .action-card {
    margin-bottom: 20px;

    :deep(.el-card__body) {
      padding: 15px 20px;
    }

    /*操作区域*/
    .action-wrapper {
      display: flex;
      gap: 10px;
    }
  }

  /*内容展示卡片*/
  .content-card {
    :deep(.el-card__body) {
      padding: 20px;
    }

    .loading-container {
      padding: 20px 0;
    }

    .detail-header {
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid #ebeef5;
      
      h2 {
        margin: 0 0 16px;
        font-size: 20px;
        color: #303133;
        text-align: center;
      }
      
      .detail-info {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        
        p {
          margin: 0;
          color: #606266;
        }
      }
    }
    
    .budget-content {
      /* 预算单内容样式会由v-html注入的内容自带 */
      :deep(table) {
        width: 99%;
        border-collapse: collapse;
        margin: 16px auto;
      }
      
      :deep(table, th, td) {
        border: 1px solid black;
        text-align: center;
        vertical-align: middle;
        padding: 8px;
      }
      
      :deep(.yellow-bg) {
        background-color: #FFFF00;
      }
      
      :deep(.pink-bg) {
        background-color: #FFCCCC;
      }
      
      :deep(.blue-bg) {
        background-color: #CCFFFF;
      }
      
      :deep(.total-row) {
        font-weight: bold;
      }
      
      :deep(.total-row td) {
        font-weight: bold;
        background-color: #f2f2f2;
      }
      
      :deep(.budget-header) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #ebeef5;
        position: relative;
        text-align: center;
      }
      
      :deep(.budget-logo) {
        position: absolute;
        top: 10px;
        text-align: center;
      }
      
      :deep(.budget-info) {
        text-align: center;
        margin: 0 auto;
        width: 100%;
      }
      
      :deep(.budget-date) {
        text-align: center;
        font-size: 14px;
        color: #606266;
      }
      
      :deep(.print-button) {
        display: none !important;
      }
    }
  }
}

/* 打印样式 */
@media print {
  .action-card {
    display: none;
  }
  
  .detail-header {
    display: none;
  }
  
  .content-card {
    box-shadow: none !important;
    
    :deep(.el-card__body) {
      padding: 0 !important;
    }
  }
}
</style> 